<template>
  <div>
    <avue-crud v-show="page.total > 0"
               :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot-scope="{row}" slot="platforms">
        <div style="display: flex;">
          <div style="width: 20px;margin-right: 4px"
               v-for="(item,index) in platformLogo(row.websitePlatform)" :key="index">
            <img style="width: 100%" :src="item.url">
          </div>
        </div>
      </template>
      <template slot-scope="{row}" slot="os">
        <div>
          <a v-show="row.androidUrl !== ''" style="margin-right: 5px;">android</a>
          <a v-show="row.iosUrl !== ''">ios</a>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import {getUserOfferList} from "@/api/business/offer";
import {mapGetters} from "vuex";
import store from '@/store'
import {getSysDictList} from "@/api/system/dict";
import {findObject} from "@/util/util";
import {platformLogo} from "../../../util/beetles";

export default {
  name: 'offerList',
  props: {
    userId: {
      type: String,
    },
    offerType: {
      type: String,
    }
  },
  data() {
    return {
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      statusList: [
        {label: '草稿', value: 0},
        {label: '活跃', value: 1},
        {label: '停止', value: 2},
        {label: '删除', value: 3},
      ],
      option: {
        tip: false,
        searchShow: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        selection: false,
        menu: false,
        columnBtn: false,
        refreshBtn: false,
        column: [
          {
            label: "订单名称",
            prop: "name",
          },
          {
            label: "客户",
            prop: "customerName",
            showColumn: store.getters.userInfo.is_agency === 1
          },
          {
            label: "产品名",
            prop: "productName",
          },
          {
            label: "账户",
            prop: "accounts",
          },
          {
            label: "是否审核素材",
            prop: "auditCreative",
            type: 'select',
            dicData: [
              {label: '是', value: 1},
              {label: '否', value: 0}
            ],
          },
          {
            label: "媒体",
            prop: "platforms",
            type: 'select',
            multiple: true,
            slot: true,
            dataType: 'string',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "类型",
            prop: "os",
            type: 'select',
            multiple: true,
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            slot: true,
            dataType: 'string',
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea"
          },
          {
            label: "状态",
            prop: "status",
            type: 'select',
            dicData: [
              {label: '草稿', value: 0},
              {label: '活跃', value: 1},
              {label: '停止', value: 2},
              {label: '删除', value: 3}
            ],
          },
          {
            label: "创建时间",
            prop: "createTime",
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    getSysDictList('platforms,app_os').then(map=>{
      this.platformList = map['platforms'];
      let column = findObject(this.option.column, 'platforms', 'prop')
      if(column != null) {
        column.dicData = map['platforms'];
      }
      column = findObject(this.option.column, 'os', 'prop')
      if(column != null) {
        column.dicData = map['app_os'];
      }
    });
  },
  mounted() {
  },

  methods: {
    //table 状态
    statusTableList() {
      return [
        {label: '草稿', value: 0, disabled: true},
        {label: '活跃', value: 1},
        {label: '停止', value: 2}
      ]
    },
    //媒体 logo
    platformLogo(val) {
      return platformLogo(val)
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.userId = this.userId;
      this.query.offerTypeList = this.offerType;
      getUserOfferList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped>
  /deep/.avue-crud__menu {
    min-height: 0px;
  }
</style>
